<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../logo.svg" />
    <style>
      .basic {
        border: 1px solid #000;
        min-height: 5em;
        margin-top: 1em;
        margin-bottom: 1em;
      }
      .happy {
        border-color: orangered;
        background: orange;
      }
      .sad {
        border-color: green;
        background: red;
      }
      .normal {
        border-color: blueviolet;
        background: gray;
      }
      .yesen-1 {
        font-size: x-large;
      }
      .yesen-2 {
        color: wheat;
        background: blueviolet;
      }
      .yesen-3 {
        border-radius: 6px;
      }
    </style>
    <title>绑定样式</title>
  </head>
  <body>
    <div id="root">
      <!-- 绑定class样式之字符串写法，适用于样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="cssClass" @click="changeMood">{{name}}</div>
      <!-- 绑定class样式之数组写法，适用于样式个数不确定、名字也不确定 -->
      <div class="basic" :class="cssClassArr">{{name}}</div>
      <!-- 绑定class样式之对象写法，适用于样式个数确定、名字也确定，但要动态决定用不用 -->
      <div class="basic" :class="cssClassObj">{{name}}</div>

      <hr />
      <div class="basic" :style="styleObj">{{name}}</div>
    </div>

    <script src="../../vue.js"></script>
    <script>
      Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
      const moodArr = ["normal", "sad", "happy"];
      new Vue({
        el: "#root",
        data: {
          name: "Yesen",
          cssClass: "normal",
          cssClassArr: ["yesen-1", "yesen-2", "yesen-3"],
          cssClassObj: { "yesen-1": true, "yesen-2": true },
          styleObj: {
            fontSize: "4em",
          },
        },
        methods: {
          changeMood() {
            const idx = parseInt((Math.random() * 10000) % moodArr.length, 10);
            this.cssClass = moodArr[idx];
          },
        },
      });
    </script>
  </body>
</html>
